@import "@/common/constants/StyleConst.scss";

.Task-Container :deep {
  height: 100%;
  border-top-left-radius: inherit !important;
  border-top-right-radius: inherit !important;
  border-bottom-left-radius: inherit !important;
  border-bottom-right-radius: inherit !important;

  .header {
    color: $color-text-white;
    font-size: 14px;
    font-weight: 700;
  }

  &.relax {
    .v-list-item__content {
      flex-wrap: unset;

      .v-list-item__subtitle {
        white-space: unset;
      }
    }

    .v-list-item__action {
      flex-direction: row;
      flex: 1;
      align-items: center;
      gap: 10px;
    }
  }

  &.compact {
    .v-list-item__avatar {
      align-self: flex-start;
    }
  }

  .v-list {
    background: $color-bg-white;
    height: calc(100% - 32px);
    overflow-y: scroll;
    overflow-y: overlay;
    padding-bottom: unset;

    .v-list-item {
      &:hover {
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
        background-color: #ECEDEE66;
      }

      border-bottom: 2px solid #D9D9D9;

      .v-list-item__content {
        .v-list-item__title {
          &>div:first-child {
            font-size: 14px;
            margin-bottom: 2px;
          }

          font-weight: 700;
        }

        &>div {
          color: #565656;
          font-size: 12px;
        }
      }

      .v-list-item__avatar {
        overflow: unset;
        display: flex;
        flex-direction: column;
        height: unset !important;
        min-width: unset !important;
        width: unset !important;

        .user-name {
          white-space: nowrap;
        }
      }

      .transparent {
        background-color: transparent;
      }

      .v-list-item__action {
        margin: 4px 0;

        .date {
          &.red-color {
            color: #EA694D;
          }
        }

        .icon {
          color: #79839B;

          &::before {
            font-size: 16px;
          }
        }
      }
    }
  }
}